<template>
    <div>
        <!-- 弹窗 -->
        <el-dialog :title="isAdd ? '添加商品分类' : '编辑商品分类'" :visible.sync="isShow" center :before-close="cancel">
            <el-form :model="cateForm" :rules="rules" ref="cateRef" label-width="100px" class="demo-ruleForm">
                <el-form-item label="上级分类" prop="pid">
                    <el-select v-model="cateForm.pid" placeholder="请选择活动区域">
                        <el-option label="顶级菜单" :value="0"></el-option>
                        <el-option v-for="item in $store.getters['cate/getCateList']" :label="item.catename" :key="item.id"
                            :value="item.id">
                        </el-option>

                    </el-select>
                </el-form-item>
                <el-form-item label="分类名称" prop="catename">
                    <el-input v-model="cateForm.catename"></el-input>
                </el-form-item>
                <!-- 文件上传 -->
                <el-form-item v-if="cateForm.pid!=0" label="图片" prop="name">
                    <el-upload action="#" list-type="picture-card" :on-preview="photo" :on-change="sub_photo"
                        :auto-upload="false" :limit="1" :file-list="photoList">
                        <i class="el-icon-plus"></i>
                    </el-upload>
                    <el-dialog :visible.sync="dialogVisible">
                        <img width="100%" :src="dialogImageUrl" alt="">
                    </el-dialog>
                </el-form-item>
                <el-form-item label="状态" prop="status">
                    <el-switch v-model="cateForm.status" active-color="#13ce66" inactive-color="#ff4949" :active-value="1"
                        :inactive-value="2">
                    </el-switch>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancel">取 消</el-button>
                <el-button type="primary" @click="add">确 定</el-button>
            </div>
        </el-dialog>

    </div>
</template>
<script>
import { mapActions, mapGetters } from 'vuex';
import { cateAdd, cateInfo, cateEdit } from '../../request/api';
export default {
    props: ['isShow', 'isAdd'],
    data() {
        return {

            cateForm: {
                catename: '',//商品分类名称
                pid: 0,//上级分类编号
                img: '',//图片(文件，一般用于二级分类)
                status: 1,//状态    1正常2禁用
            },
            formLabelWidth: '120px',
            value: 1,
            rules: {
                catename: [
                    { required: true, message: '请输入分类名称', trigger: 'blur' },
                    { min: 2, max: 6, message: '长度在 2 到 6 个字符', trigger: 'blur' }
                ],
                pid: [
                    { required: true, message: '请选择上级分类', trigger: 'change' }
                ],

            },
            dialogImageUrl: '',//预览图片
            dialogVisible: false,//预览弹窗状态值
            photoList: [],//图片列表
        }
    },
    methods: {
        ...mapActions({
            getCateList: 'cate/getCatelistAction'
        }),
        sub_photo(file, fileList) {
            console.log(file, fileList);
            this.cateForm.img = file.raw;//将图片的所有信息赋值给img
        },
        // 预览图片
        photo(file) {
            console.log(file);
            this.dialogVisible = true;//将预览弹窗打开
            this.dialogImageUrl = file.url;//赋值图片地址
            console.log(this.dialogImageUrl);
        },
        // 关闭弹窗
        cancel() {
            this.$emit('cancel');
            this.reset();
            this.resetForm();
            // 清空图片列表
            this.photoList = [];
        },
        // 清空表单
        reset() {
            this.cateForm = {
                catename: '',//商品分类名称
                pid: 0,//上级分类编号
                img: '',//图片(文件，一般用于二级分类)
                status: '',//状态    1正常2禁用
            }
        },
        // 清空规则验证
        resetForm() {
            this.$refs.cateRef.resetFields();
        },
        //数据回显
        lookup(id) {
            // console.log(id,'回显');
            // 请求要编辑的信息
            cateInfo({ id }).then(res => {
                if (res.code == 200) {
                    this.cateForm = res.list
                    this.cateForm.id = id;
                    this.photoList = this.cateForm.img?[{url:this.cateForm.img }]:[]
                }
            })
        },
        // 点及添加
        add() {
            this.$refs.cateRef.validate(value => {
                if (value) {
                    if (this.isAdd) {
                        console.log(this.cateForm);
                        // 添加
                        // return
                        cateAdd(this.cateForm).then(res => {
                            if (res.code == 200) {
                                // 添加成功
                                this.$message.success(res.msg);
                                // 清空表单
                                this.cancel();
                                // 重新获取分类列表  进行渲染视图
                                this.getCateList();
                            } else {
                                // 添加失败
                                this.$message.error(res.msg)
                            }
                        })
                    } else {
                        console.log('编辑');
                        // 编辑
                        cateEdit(this.cateForm).then(res => {
                            console.log(res);
                            if (res.code == 200) {
                                // 编辑成功
                                this.$message.success(res.msg);
                                // 关闭弹窗
                                this.cancel();
                                // 重新渲染视图
                                this.getCateList();

                            } else {
                                // 编辑失败
                                this.$message.error(res.msg);
                            }

                        })
                    }
                }
            })
        }
    },
    mounted() {
        // this.getCateList()
        console.log(this.$store);

    },
    watch: {},
    computed: {
        ...mapGetters({
            cateList: 'cate/getCateList'
        })
    },
    filters: {},
    components: {},
}
</script>
<style scoped>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>